<template>
  <div class="BRL">
    <h3>{{ $t("language.rechange.USDT.title") }}</h3>
    <dl>
      <dd v-for="(item, index) in btn" :key="index" @click="btnindex = index"
        :class="btnindex == index ? 'activec' : ''">
        {{ $t(item) }}
      </dd>
    </dl>
    <h3>{{ $t("language.rechange.BRL.title2") }}</h3>
    <Transition name="fade">
      <ol v-if="btnindex != 1">
        <li v-for="(item, index) in moneyinfo.fixedAmounts" @click="money(item.amounts, item.productId)" :key="index">
          <div :class="rechange.payAmount == item.amounts ? 'activem' : ''"> {{ item.amounts }} {{
      $t("language.rechange.USDT.money") }}</div>

        </li>
      </ol>
    </Transition>

    <div class="input">
      <span>{{ $t("language.rechange.USDT.money") }}</span>
      <el-input type="number" v-model="rechange.payAmount"
        :placeholder="moneyinfo.minAmount + '~' + moneyinfo.maxAmount" />
    </div>
    <footer>
      <van-button :loading="loading" loading-type="spinner" :disabled="loading || rechange.payAmount == ''"
        @click="rechangesubmit">{{ $t("language.rechange.USDT.footbtn") }}</van-button>
      <div></div>
      <p>
        <span>{{ $t("language.rechange.USDT.p1") }}</span>
        <strong @click="$openPage('/kefu')">{{ $t("language.rechange.USDT.p2") }}</strong>
        <span>{{ $t("language.rechange.USDT.p3") }}</span>
      </p>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick, getCurrentInstance, defineProps } from "vue";
import { useI18n } from "vue-i18n";
const { proxy } = getCurrentInstance();
const { t } = useI18n();
let info = JSON.parse(localStorage.getItem("info"));
const props = defineProps({

});
let rechange = reactive({
  id: info.gameID,
  coinType: 1,
  payMode: 0,
  isFixed: true,
  productId: 0,
  payAmount: "",
});
let loading = ref(false);
//获取充值数据
let moneyinfo = reactive({
  coinType: 0,
  fixedAmounts: [],
  maxAmount: 1000000,
  minAmount: 2000,
  payMode: 0,
})
let cointype = () => {
  proxy
    .$post(`/Payment/v1.0/User/Recharge/Protocol`, { id: info.gameID })
    .then(({ data }) => {
      for (let key in data.data.list[0]) {
        moneyinfo[key] = data.data.list[0][key];
      }
    });
};
cointype()
//充值
let rechangesubmit = () => {
  loading.value = true;
  proxy
    .$post(`/Payment/v1.0/Web/User/Recharge`, { ...rechange })
    .then((res) => {
      switch (res.data.code) {
        case 400:
          ElMessage({
            message: t("language.commontips.usernoexist"),
            type: "error",
            duration: 1000,
          });
          break;
        case 0:
          ElMessage({
            message: t("language.commontips.rechangetips"),
            duration: 1000,
            type: "success",
          });
          break;
      }
    })
    .finally(() => {
      nextTick(() => {
        loading.value = false;
      });
    });
};
let btnindex = ref(2);
let btn = reactive([
  "language.rechange.USDT.btn1",
  "language.rechange.USDT.btn2",
]);
let money = (val: string, id) => {
  rechange.payAmount = val;
  rechange.productId = id
};
</script>

<style scoped lang="scss">
.BRL {
  width: 100%;
  padding: 0 16px;

  h3 {
    font-size: 18px;
    color: #ffffff;
    margin: 10px 0;
  }

  .icon {
    width: 99px;
    height: 78px;
    border-radius: 10px;
    border: 2px solid #0a906c;
    background-color: rgb(71, 74, 81);

    img {
      width: 25px;
    }

    @include flex(column, center, center);

    strong {
      font-size: 14px;
      color: #ffffff;
      display: block;
      margin-top: 8px;
    }
  }

  p {
    font-size: 15px;
    color: #fff;
    margin: 10px 0 20px 0;
  }

  ol {
    @include flex(row, flex-start, flex-start);
    flex-wrap: wrap;

    li {
      width: 25%;
      margin: 0 0px 10px 0;
      div {
        width: 90%;
        height: 72px;
        @include flex(row, center, center);
        background-color: #32353e;
        border-radius: 10px;
        border: 2px solid #4a4c53;
        text-align: center;
        font-size: 14px;
        color: #b5bac8;
        font-weight: bold;
      }
    }


    .activem {
      border: 2px solid #0a906c;
      color: #fff;
    }
  }

  dl {
    @include flex(row, flex-start, center);

    dd {
      @include flex(row, center, center);
      background-color: #32353e;
      border-radius: 10px;
      width: 92px;
      height: 45px;
      border: 2px solid #4a4c53;
      text-align: center;
      margin-bottom: 10px;
      font-size: 14px;
      color: #b5bac8;
      font-weight: bold;
    }

    dd+dd {
      margin-left: 15px;
    }

    .activec {
      border: 2px solid #0a906c;
      color: #fff;
      background-color: rgb(71, 74, 81);
    }
  }

  .input {
    height: 45px;
    @include flex(row, flex-start, center);
    margin-top: 5px;

    span {
      font-size: 18px;
      color: #fff;
      margin-right: 10px;
      font-weight: bold;
    }

    :deep(.el-input__wrapper) {
      height: 45px;
      border-radius: 10px;
      background-color: rgb(39, 42, 48);
      box-shadow: none;
      border: 1px solid #4a4c53;
      color: #fff;
      font-weight: bold;
    }

    :deep(.el-input__inner) {
      color: #fff;
      font-weight: bold;
    }
  }

  footer {
    position: fixed;
    width: calc(100vw - 30px);
    bottom: 10px;

    :deep(.van-button) {
      width: 100%;
      text-align: center;
      background-color: #0a906c;
      border-color: #0a906c;
      height: 44px;
      line-height: 44px;
      color: #fff;
      border-radius: 5px;
      font-size: 18px;
    }

    p {
      text-align: center;
      margin-top: 20px;

      span {
        font-size: 14px;
        color: #b5bac8;
      }

      strong {
        color: #fff;
        font-weight: normal;
      }
    }
  }
}
</style>
